import React, { Component } from 'react'
export default class Count extends Component {

    increment=()=>{
       const {value}=this.selectNum
       this.props.jia(value*1)
    }
    decrement=()=>{
        // 利用ref拿到select中的值
        const {value}=this.selectNum
        this.props.jian(value*1)
    }
    incrementIfOdd=()=>{
        // 利用ref拿到select中的值
        const {value}=this.selectNum
        if(this.props.count % 2 !==0){
            this.props.jia(value*1)
        }
    }
    incrementasync=()=>{
        // 利用ref拿到select中的值
        const {value}=this.selectNum
        this.props.jiaAsync(value*1,500)
    }
    render() {
        console.log('接收到的UI组件的值为：',this.props.count)
        return (
            <div>
                <h1>当前求和：{this.props.count}</h1>
                <select ref={c=>this.selectNum=c}>
                    <option value="1"> 1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                &nbsp;
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementIfOdd}>当前数为积数再加</button>
                <button onClick={this.incrementasync}>异步再加</button>
            </div>
        )
    }
}
